import React, { Component } from 'react'
import { Layout, message } from 'antd'
import logo from '@/assets/images/logo.png'
import { login } from '@/api/login-api'
import './index.less'
import { Form, Icon, Input, Button } from 'antd'
import { Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
const { Header, Content } = Layout

/**
 * 登录的路由组件
 */
@connect(
  (state) => ({ user: state.user }),
  (dispatch) => ({
    setUser: (user) => dispatch({ type: 'setUser', data: user }),
  })
)
class index extends Component {
  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        login(values).then((data) => {
          if (data.status === 0) {
            message.success('登录成功')
            this.props.setUser(data.data)
            this.props.history.replace('/')
          } else {
            message.error(data.msg || '登录失败')
          }
        })
      } else {
        message.error('登录失败')
      }
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form
    const user = this.props.user
    if (user._id) {
      return <Redirect to="/"></Redirect>
    }
    return (
      <Layout className="login">
        <Header className="login-header">
          <img className="logo" src={logo}></img>
          <h1>React项目：后台管理系统</h1>
        </Header>
        <Content className="content">
          <Form onSubmit={this.handleSubmit} className="login-form">
            <Form.Item>
              <h1>用户登录</h1>
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('username', {
                initialValue: 'admin',
                rules: [
                  { required: true, whitespace: true, message: '请输入用户名' },
                ],
              })(
                <Input
                  prefix={
                    <Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />
                  }
                  placeholder="用户名"
                />
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('password', {
                initialValue: 'admin',
                rules: [
                  { required: true, whitespace: true, message: '请输入密码' },
                  {
                    pattern: '^[a-zA-Z0-9]{4,12}$',
                    message: '密码必须位包含字母数字下划线4~12位的字符串',
                  },
                ],
              })(
                <Input
                  prefix={
                    <Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />
                  }
                  type="password"
                  placeholder="密码"
                />
              )}
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
                block
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </Content>
      </Layout>
    )
  }
}

export default Form.create({})(index)
